<template>
  <div>
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <span class="yun01">请假申请</span>

      <el-form-item label="申请类型">
        <el-col :span="13">
          <el-radio-group v-model="ruleForm.ApplyForTpe">
            <el-radio :label="1">请假</el-radio>
            <el-radio :label="2">出差</el-radio>
            <el-radio :label="3">外勤</el-radio>
            <el-radio :label="4">未打卡</el-radio>
            <el-radio :label="5">公司活动</el-radio>
            <el-radio :label="6">部门活动</el-radio>
            <el-radio :label="7">加班离岗</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>

      <el-form-item label="请假事由" v-show="ruleForm.ApplyForTpe == 1">
        <el-col :span="10">
          <el-radio-group v-model="ruleForm.LeaveReason">
            <el-radio label="年假">年假</el-radio>
            <el-radio label="事假">事假</el-radio>
            <el-radio label="病假">病假</el-radio>
            <el-radio label="婚假">婚假</el-radio>
            <el-radio label="产/陪产假">产/陪产假</el-radio>
            <el-radio label="丧假">丧假</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>

      <el-form-item label="请假时间" v-show="ruleForm.ApplyForTpe == 1">
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="开始日期"
              v-model="ruleForm.BeginLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">至</el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="结束日期"
              v-model="ruleForm.FinishLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="考勤统计" v-show="ruleForm.ApplyForTpe == 1">
        <el-col :span="6">
          <el-input v-model="ruleForm.StatisticsTime"></el-input>
        </el-col>
        <a class="yun03">小时</a>
      </el-form-item>

      <el-form-item label="备注" v-show="ruleForm.ApplyForTpe == 1">
        <el-input
          class="yun04"
          type="textarea"
          v-model="ruleForm.ApplyForRemark"
        ></el-input>
      </el-form-item>

      <el-form-item label="项目名称" v-show="ruleForm.ApplyForTpe == 2">
        <el-col :span="6">
          <el-input v-model="ruleForm.EntryName"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="出差地点" v-show="ruleForm.ApplyForTpe == 2">
        <el-col :span="6">
          <el-input v-model="ruleForm.TravelLocation"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="请假时间" v-show="ruleForm.ApplyForTpe == 2">
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="开始日期"
              v-model="ruleForm.BeginLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">至</el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="结束日期"
              v-model="ruleForm.FinishLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="备注" v-show="ruleForm.ApplyForTpe == 2">
        <el-input
          class="yun04"
          type="textarea"
          v-model="ruleForm.ApplyForRemark"
        ></el-input>
      </el-form-item>

      <el-form-item label="公里数" v-show="ruleForm.ApplyForTpe == 2">
        <el-col :span="6">
          <el-input v-model="ruleForm.GongLi"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="项目名称/事由" v-show="ruleForm.ApplyForTpe == 3">
        <el-col :span="6">
          <el-input v-model="ruleForm.EntryName"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="地点" v-show="ruleForm.ApplyForTpe == 3">
        <el-col :span="6">
          <el-input v-model="ruleForm.TravelLocation"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="时间" v-show="ruleForm.ApplyForTpe == 3">
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="开始日期"
              v-model="ruleForm.BeginLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">至</el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="结束日期"
              v-model="ruleForm.FinishLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="加班时长" v-show="ruleForm.ApplyForTpe == 3">
        <el-col :span="6">
          <el-input v-model="ruleForm.StatisticsTime"></el-input>
        </el-col>
        <a class="yun05">小时</a>
      </el-form-item>

      <el-form-item label="申请时间" v-show="ruleForm.ApplyForTpe == 4">
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="开始日期"
              v-model="ruleForm.BeginLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">至</el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="结束日期"
              v-model="ruleForm.FinishLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="加班时长" v-show="ruleForm.ApplyForTpe == 4">
        <el-col :span="6">
          <el-input v-model="ruleForm.StatisticsTime"></el-input>
        </el-col>
        <a class="yun05">小时</a>
      </el-form-item>

      <el-form-item label="原因" v-show="ruleForm.ApplyForTpe == 4">
        <el-input
          class="yun04"
          type="textarea"
          v-model="ruleForm.ApplyForRemark"
        ></el-input>
      </el-form-item>

      <el-form-item label="活动事由" v-show="ruleForm.ApplyForTpe == 5">
        <el-col :span="8">
          <el-radio-group v-model="ruleForm.LeaveReason">
            <el-radio label="考察">考察</el-radio>
            <el-radio label="大游">大游</el-radio>
            <el-radio label="小游">小游</el-radio>
            <el-radio label="年会">年会</el-radio>
            <el-radio label="其他">其他</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>

      <el-form-item label="申请时间" v-show="ruleForm.ApplyForTpe == 5">
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="开始日期"
              v-model="ruleForm.BeginLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">至</el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="结束日期"
              v-model="ruleForm.FinishLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="考勤统计" v-show="ruleForm.ApplyForTpe == 5">
        <el-col :span="6">
          <el-input v-model="ruleForm.StatisticsTime"></el-input>
        </el-col>
        <a class="yun05">小时</a>
      </el-form-item>

      <el-form-item label="备注" v-show="ruleForm.ApplyForTpe == 5">
        <el-input
          class="yun04"
          type="textarea"
          v-model="ruleForm.ApplyForRemark"
        ></el-input>
      </el-form-item>

      <el-form-item label="活动事由" v-show="ruleForm.ApplyForTpe == 6">
        <el-col :span="5">
          <el-radio-group v-model="ruleForm.LeaveReason">
            <el-radio label="组织活动">组织活动</el-radio>
            <el-radio label="聚餐">聚餐</el-radio>
            <el-radio label="其他">其他</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>

      <el-form-item label="申请时间" v-show="ruleForm.ApplyForTpe == 6">
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="开始日期"
              v-model="ruleForm.BeginLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">至</el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="结束日期"
              v-model="ruleForm.FinishLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="考勤统计" v-show="ruleForm.ApplyForTpe == 6">
        <el-col :span="6">
          <el-input v-model="ruleForm.StatisticsTime"></el-input>
        </el-col>
        <a class="yun05">小时</a>
      </el-form-item>

      <el-form-item label="备注" v-show="ruleForm.ApplyForTpe == 6">
        <el-input
          class="yun04"
          type="textarea"
          v-model="ruleForm.ApplyForRemark"
        ></el-input>
      </el-form-item>

      <el-form-item label="申请事由" v-show="ruleForm.ApplyForTpe == 7">
        <el-col :span="5">
          <el-radio-group v-model="ruleForm.LeaveReason">
            <el-radio label="加班时中途退出">加班时中途退出</el-radio>
            <el-radio label="参加活动">参加活动</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>

      <el-form-item label="申请时间" v-show="ruleForm.ApplyForTpe == 7">
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="开始日期"
              v-model="ruleForm.BeginLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">至</el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="结束日期"
              v-model="ruleForm.FinishLeaveTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="考勤统计" v-show="ruleForm.ApplyForTpe == 7">
        <el-col :span="6">
          <el-input v-model="ruleForm.StatisticsTime"></el-input>
        </el-col>
        <a class="yun05">小时</a>
      </el-form-item>

      <el-form-item label="备注" v-show="ruleForm.ApplyForTpe == 7">
        <el-input
          class="yun04"
          type="textarea"
          v-model="ruleForm.ApplyForRemark"
        ></el-input>
      </el-form-item>

      <el-form-item class="yun02">
        <el-button type="success" size="small" @click="submitForm"
          >申请</el-button
        >
        <el-button @click="resetForm">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        ApplyName:"水户甚羽",
        ApplyForTpe: "", //申请类型
        LeaveReason: "", //请假事由
        EntryName: "", //项目名称
        TravelLocation: "", //出差地点
        BeginLeaveTime: "", //请假开始时间
        FinishLeaveTime: "", //请假结束时间
        StatisticsTime: 7.5, //考勤统计
        ApplyForRemark: "", //备注
        Clocking_inState: "待审批", //审批状态
        ZhuangTai: "未处理",
        GongLi: "1", //公里数
      },
    };
  },
  methods: {
    //添加申请(所有申请类型)
    submitForm() {
      this.$axios({
        url: "http://localhost:20932/api/SystemManager/LeaveApply/AddClocking_inApplyFo",
        method: "post",
        data: this.ruleForm,
      }).then((res) => {
        if (res.data==false) {
          alert("申请失败");
          return;
        }
        alert("申请成功");
        this.$router.push("/i/attendance_request_list");
        return;
      });
    },
    //返回页面
    resetForm() {},
  },
};
</script>

<style scoped>
.yun01 {
  color: rgb(117, 113, 113);
  font-weight: bold;
}
.yun02 {
  transform: translateX(-150px);
}
.yun03 {
  float: left;
}
.yun04 {
  height: 50px;
  width: 300px;
  float: left;
}
.yun05 {
  float: left;
}
</style>